<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>任务列表</title>
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script src="https://og6593g2z.qnssl.com/fundebug.0.3.3.min.js" apikey="e65b1e28cd641345cd31ef6dce8ac62f7aaa3ba3420be5a1c4aa23ee3636992d"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/productTask/moment.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/productTask/vue.min.js{$Think.config.RESOURCE_VER}"></script>
    <!--<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">-->
    <link href="{$Think.config.SERVER_NAME}/wx_assets/productTask/iview.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script src="{$Think.config.RESOURCEURL}wx_assets/productTask/iview.min.js{$Think.config.RESOURCE_VER}"></script>
    <link href="{$Think.config.RESOURCEURL}wx_assets/productTask/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <link href="{$Think.config.RESOURCEURL}wx_assets/productTask/taskList.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <style lang="css">
        .right h2 {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div id="app">
    <i-menu mode="horizontal" active-name="1" class="menu" @on-select="menuChange">
        <menu-item name="1" class="menuItem">
            进行中的任务
        </menu-item>
        <menu-item name="2" class="menuItem">
            已完成的任务
        </menu-item>
        <menu-item name="3" class="menuItem">
            已失败的任务
        </menu-item>
    </i-menu>
    <section class="list">
        <ul>
            <li v-for="(task,index) in taskList" :key="task.id" @click="goto(task.id)">
                <div class="left">
                    <img :src="task.proImg" alt="">
                </div>
                <div class="right">
                    <h2 v-text="task.taskName"></h2>
                    <div style="position:relative"><span>进度：</span><i-progress :percent="task.progress" class="progress" :stroke-width="5"></i-progress></div>
                    <div v-if="task.status == 1 || task.status == 4"><icon type="ios-clock-outline" class="el-icon-time"></icon><span class="time">剩余时间：{{task.time}}</span></div>
                </div>
            </li>
        </ul>
    </section>
</div>
</body>
<script>
    var baseUrl = '{$Think.config.SERVER_HOST}';
    var app = new Vue({
        el: '#app',
        data:function() {
            return {
                taskList:[],
                start:0,
                limit:10,
                total:0,
                menuIndex:1
            }
        },
        mounted:function(){
            this.init();
            this.updateTime();
        },
        methods:{
            init:function(){
                this._initEvent();
                this._loadList(this.start);
            },
            _initEvent:function(){
                var me=this;
                $.util.initDataLoading({
                    me:this,
                    lastChildren:function(){
                        return $(".list li:last");
                    },
                    page:function(){
                        return me.start;
                    },
                    pageCount:function(){
                        return Math.ceil(me.total / me.limit);
                    }
                });
            },
            _loadList:function(start,callback){
                var self = this,
                    limit = this.limit,
                    status = this.menuIndex;
                var params={
                    status:status,
                    start:start,
                    limit:limit
                };
                this.$Spin.show();
                $.req.get("call.json?module=productTask&customerId={$customerId}&method=getIndex",{
                    params:params
                },function(data){
                    self.$Spin.hide();
                    if(data&&data.results){
                        data.results.map(function(item){
                            item.progress = parseInt(item.progress/item.allProgress*100);
                            var endTime = moment(item.startTime).add(item.taskTime,'hours');
                            item.time = self.calDiffMonths(endTime);
                            return item;
                        });
                        if(start<=0){
                            self.taskList = data.results;
                        }else{
                            self.taskList = self.taskList.concat(data.results);
                        }
                        self.total = data.total;
                        self.start = start;
                    }else{
                        if(start<=0){
                            self.taskList = [];
                            self.total = 0;
                        }
                    }
                    callback&&callback();
                });
            },
            menuChange:function(name){
                this.start=0;
                this.total = 0;
                this.menuIndex = name;
                this._loadList(0);
                $("#dataEnd").hide();
            },
            calDiffMonths:function(EndDate) {
                var StartDate = moment();
                var time = EndDate.diff(StartDate);
                var duration= moment.duration(time);
                if (duration.years() > 0 || duration.months() > 0 || duration.days() > 0) {
                    return duration.years() * 365 + duration.months() * 31 + duration.days() + "天" + duration.hours() + "小时" + duration.minutes() + "分钟";
                } else if (duration.hours() > 0) {
                    return duration.hours() + "小时" + duration.minutes() + "分钟";
                } else {
                    return duration.minutes() + "分钟";
                }
            },
            updateTime:function(){
                var self = this;
                this.taskList.map(function(item){
                    var endTime = moment(item.startTime).add(item.taskTime,'hours');
                    item.time = self.calDiffMonths(endTime);
                    return item;
                });
                setTimeout(this.updateTime,60000);
            },
            goto:function(id){
                location.href='{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=productTask&method=index&params=%7B%22id%22:'+id+',"h":"progressList"%7D';
            }
        }
    })
</script>
<script>
    wx_share.init({
        "pkg":{
            "appId": '{$pkg.appId}',
            "timestamp": '{$pkg.timestamp}',
            "nonceStr": '{$pkg.nonceStr}',
            "signature": '{$pkg.signature}'
        },
        "hideAllnone":true
    });
</script>
</html>
